<template>
  <div class="title">
    <div class="left">中国社区</div>
    <div class="right">
      <div class="right-l">
        <h3>欢迎进入中国社区</h3>
        <p>Welcome to China community</p>
      </div>
      <div class="right-r">
        <div class="left" @click='$router.push({name:"inbox_table",params:{unread:true}})' style="cursor:pointer">
          <img src="../../../static/images/notice.png" alt>
          <!-- <img src="../../../static/images/red.png" alt class="red"> -->
          <el-badge :value="$store.getters.isshow" class="item" v-if='$store.getters.isshow>0'></el-badge>
        </div>
        <div class="level">
          <span class="memberLev">{{this.memberLevel?this.memberLevel:''}}</span>
          <span class="groupLev">团队级别: {{this.groupLevel?this.groupLevel:'无'}}</span>
        </div>
        <div class="middle" style="cursor:pointer">
          <p>
            <el-dropdown placement="bottom">
              <span class="el-dropdown-link">
                {{name}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" trigger="click">
                <el-dropdown-item>
                  <p @click="goRouter('/personalInfo')">个人中心</p>
                </el-dropdown-item>
                <el-dropdown-item>
                  <p @click="goRouter('/changePwd')">修改密码</p>
                </el-dropdown-item>
                <el-dropdown-item>
                  <p @click="goRouter('/authenticateInfo')">个人信息验证</p>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <p @click="logout">退出登录</p>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </p>
        </div>
        <div class="bottom" style='margin-left: 10px;'>
          <img src="../../../static/images/admin.png" alt>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Message } from "element-ui";

export default {
  data() {
    return {
      name: JSON.parse(localStorage.getItem("userData")).loginName,
      memberLevel: '', //会员等级
      groupLevel: '', //团队等级
    };
  },
  created() {
    // console.log(JSON.parse(localStorage.getItem("userData")))
    this.getUnreadNum();
    //获取用户信息
    u.userInfo({
      id:localStorage.getItem("userID"),
      },data=>{
       if(data && data.code == "200"){
         this.memberLevel=data.data.memberLevelString;
         this.groupLevel=data.data.groupLevelString
       }
    })
  },
  mounted() {},
  methods: {
    goRouter(route) {
      this.$router.push({ path: route });
    },
    getUnreadNum() {
      if (this.$route.path == "/login") return;
      u.unreadNum({}, data => {
        if (data.code == 200) {
          this.$store.commit("setuserNum", data.data);
        }
      });
    },
    logout() {
      u.logout(data => {
        if (data && data.code == "200") {
          this.$router.push({ path: "/login" });
          return Message({
            message: "已注销",
            type: "success",
            duration: 1000
          });
        } else {
          this.$router.push({ path: "/login" });
        }
      });
    }
  }
};
</script>
<style lang='less' scoped>
@color: #282828;
.title {
  display: flex;
  height: 90px;
  > .left,
  .right {
    height: 100%;
  }
  > .left {
    color: white;
    background-color: #ffb001;
    width: 240px;
    text-align: center;
    line-height: 90px;
    font-size: 32px;
  }
  > .right {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 240px);
    > .right-l {
      > h3 {
        font-size: 24px;
        color: @color;
        position: relative;
        top: -5px;
      }
      > p {
        font-size: 18px;
        color: #807e7a;
      }
    }
    > .right-r {
      display: flex;
      /*max-width: 355px;*/
      justify-content: space-between;
      line-height: 50px;
      > .left {
        line-height: 65px;
        > .red {
          position: relative;
          top: -20px;
          left: -8px;
        }
      }
    }
  }
}
</style>
<style>

.el-badge__content {
  background-color: red;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 15px;
  padding: 0 1px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
  position: relative;
  top: -90px;
  left: 17px;
  width: 20px;
}
.level {
  display: flex;
  margin-left: 20px;
}
.level span {
  font-size: 14px;
  margin-right: 25px;
  white-space: nowrap;
}
.el-dropdown {
  /*width: 68px;*/
}
.el-dropdown-menu p {
  width: 90px !important;
}
.el-dropdown-menu p:hover {
  background-color: #fff3d9;
  color: #ffa200;
}
</style>


